<template>
  <div class="card-container">
    <home-swiper :list="swiperList" v-if="swiperList.length && isKeep"></home-swiper>
    <div class="waitting-swiper" v-if="(!swiperList.length || !isKeep) && waitingShow">
      <img class="logo" src="/static/img/logo_grey@2x.png">
    </div>
    <div class="fun-list">
      <router-link tag="div" to="/freecard" class="btn">
        <div class="btn-content">
          <div class="left">
            <span class="title">免费办卡</span>
            <span class="desc">先用后付 随心分期</span>
          </div>
          <i class="icon-card"></i>
        </div>
      </router-link>
      <router-link tag="div" to="/process" class="btn">
        <div class="btn-content">
          <div class="left">
            <span class="title">进度查询</span>
            <span class="desc">快速办理 实时查询</span>
          </div>
          <i class="icon-process"></i>
        </div>
      </router-link>
    </div>
    <theme-title :leftBorder="false" :title="'主题精选'"></theme-title>
    <div class="jx-card-list">
      <div class="flex">
        <div class="img-box" v-for="item in jxCardList">
          <img  class="jx-card" :src="item.url"  @click="redirectToFreecard(item,'labelList')"/>
        </div>
      </div>
    </div>
    <theme-title :leftBorder="false" :title="bankList.itemTitle"></theme-title>
    <div class="bank-list">
      <div class="bank" v-for="(item,index) in bankList.itemList" @click="redirectToFreecard(item)">
        <img class="bank-logo" :src="item.channelLogo" v-if="!item.defaultImgShow" @error="imgError(index)"/>
        <default-img class="bank-logo" v-if="item.defaultImgShow"></default-img>
        <span class="bank-name">{{item.channelName}}</span>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>
<script>
  import HomeSwiper from '@/components/Swiper'
  import ThemeTitle from '@/components/themeTitle'
  import bottom from '@/components/bottom'
  import DefaultImg from '@/components/defaultImg'
  import { httpReq } from '@/common/api'
  import{mapMutations} from 'vuex'
  export default{
    name:'Card',
    components:{
      HomeSwiper,
      ThemeTitle,
      bottom,
      DefaultImg
    },
    data(){
      return {
        swiperList: [],
        isKeep: false,
        waitingShow:true,
        jxCardList:[{
          id: "High_quota",
          channelName: "额度高",
          url:'/static/img/gaoedu.png'
        },{
          id: "Passing_rate",
          channelName: "通过率高",
          url:'/static/img/gaotongguolv.png'
        },{
          id: "New_choice",
          channelName: "新人首选",
          url:'/static/img/xinshou.png'
        },{
          id: "Quick_audit",
          channelName: "审批快",
          url:'/static/img/shenpikuai.png'
        }],
        bankList:{},
      }
    },
    methods:{
      ...mapMutations([
        'changeConditions'
      ]),
      imgError(index){
        this.$set(this.bankList.itemList[index],'defaultImgShow',true);
      },
      getSwiperList(){
        httpReq('GET','/list/as/app/financial/home/Carouse/v2',{adsense:2}).then((res)=>{
          this.swiperList = res.carouseList;
          if(!this.swiperList.length){
            this.waitingShow = false
          }
          this.bankList = {
            itemList:res.hotBankList,
            itemTitle:res.hotBankTitle,
          }
        }).catch((err)=>{
          this.waitingShow = false
        })
      },
      redirectToFreecard(item){
        const arr = [{
          itemValue: item.channelName,
          itemKey: item.id,
        }];
        this.changeConditions(arr);
        this.$router.push({
          name:'freecard'
        })
      }
    },
    activated(){
      this.isKeep = true
    },
    deactivated(){
      this.isKeep = false
    },
    created(){
      this.getSwiperList()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import "~style/mixins.styl"
  .flex
    display flex
  .waitting-swiper
    height :3.1rem
    background-color $bgWait
    margin .1rem .2rem .2rem .2rem
    box-shadow()
    border-radius :.2rem
    position relative
    .logo
      width 1.16rem
      height 1.46rem
      position absolute
      top 50%
      left 50%
      transform translate(-50%,-50%)
  .fun-list
    display flex
    margin .26rem
    align-items center
    .btn
      background-color #F7F9FA
      flex 1
      height 1.4rem
      .btn-content
        display flex
        justify-content space-between
        align-items center
        margin-top .2rem
        font-size .32rem
        font-weight bold
        .left
          display flex
          flex-direction column
          .title
            line-height .5rem
            color $darkTextColor
          .desc
            margin-top .1rem
            font-size .24rem
            color #999999
            font-weight normal
        i
          margin-right .2rem
        .icon-card
          width .8rem
          height .8rem
          background url("/static/img/free.png")no-repeat
          background-size 100% 100%
        .icon-process
          width .8rem
          height .8rem
          background url("/static/img/process.png")no-repeat
          background-size 100% 100%
        span
          margin-left .2rem



    .btn + .btn
      margin-left .22rem
  .jx-card-list
    overflow-x scroll
    padding .3rem .26rem .3rem 0
    display flex
    .img-box
      height 2.3rem
      width 3.5rem
      overflow hidden
      .jx-card
        height 2.3rem
        width 3.72rem
        flex none
        box-sizing border-box


  .bank-list
    display flex
    flex-wrap wrap
    padding-bottom .2rem
    .bank
      display flex
      flex-direction column
      align-items center
      width 33.3%
      margin-top .5rem
      .bank-logo
        width .9rem
        height .9rem
        border-radius 50%
      .bank-name
        line-height .5rem
        margin-top .18rem
        color #333333
</style>
